<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="50px">
      <!-- <el-form-item label="班次" prop="shift">
        <el-select placeholder="请选择班次" v-model="queryParams.shift" style="width: 160px" clearable @change="handleQuery">
          <el-option label="白班" value="1"></el-option>
          <el-option label="夜班" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="台位" prop="positionName">
        <el-input v-model="queryParams.positionName" show-word-limit placeholder="请输入台位" maxlength="10" clearable
          @keyup.enter.native="handleQuery" style="width: 160px" />
      </el-form-item>
      <el-form-item label="股道" prop="trackName">
        <el-input v-model="queryParams.trackName" show-word-limit placeholder="请输入股道" maxlength="10" clearable
          @keyup.enter.native="handleQuery" style="width: 160px" />
      </el-form-item>
      <el-form-item label="1列位车号" label-width="80px" prop="oneColumn">
        <el-input v-model="queryParams.oneColumn" show-word-limit placeholder="请输入1列位车号" maxlength="15" clearable
          @keyup.enter.native="handleQuery" style="width: 160px" />
      </el-form-item>
      <el-form-item label="2列位车号" label-width="80px" prop="twoColumn">
        <el-input v-model="queryParams.twoColumn" show-word-limit placeholder="请输入2列位车号" maxlength="15" clearable
          @keyup.enter.native="handleQuery" style="width: 160px" />
      </el-form-item>
      <el-form-item label="长编组重联" label-width="90px" prop="isLong">
        <el-select placeholder="请选择" v-model="queryParams.isLong" style="width: 160px" clearable @change="handleQuery">
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="日期">
        <el-date-picker v-model="queryParams.jobDate" type="date" placeholder="选择日期" format="yyyy-MM-dd"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <div class="searchReset">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </div>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['workPlan:workPlan:add']">新增</el-button>
      </el-col>

      <!-- <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['workPlan:workPlan:remove']">删除</el-button>
      </el-col> -->

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <div :class="eleTabTop <= 85 ? 'eleTab' : ''" class="informationTab" ref="eleTab">
      <el-table v-loading="loading" :data="workPlanList" @selection-change="handleSelectionChange"
        :header-cell-style="{ 'text-align': 'center' }">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" align="center" type="index" width="55" />
        <el-table-column label="班次" align="center" prop="shift" >
          <template slot-scope="scope">
             <div v-if="scope.row.shift == 1">白班</div>
              <div v-if="scope.row.shift == 2">夜班</div>
          </template>
          </el-table-column>
        <el-table-column label="日期" align="center" prop="jobDate" >
        </el-table-column>
        <!-- <el-table-column label="台位" align="center" prop="positionName" />
        <el-table-column label="股道" align="center" prop="trackName" />
        <el-table-column label="1列位" align="center" prop="oneColumn" min-width="140">
          <template slot-scope="scope">
            <div @click="
              OneColmu(scope.row.oneColumn, scope.row.id, scope.row.planGuid)
              ">
              {{ scope.row.oneColumn }}
            </div>
          </template>
</el-table-column>
<el-table-column label="2列位" align="center" prop="twoColumn" min-width="140">
  <template slot-scope="scope">
            <div @click="
              twoColumn(scope.row.twoColumn, scope.row.id, scope.row.planGuid)
              ">
              {{ scope.row.twoColumn }}
            </div>
          </template>
</el-table-column>
<el-table-column label="长编组重联" align="center" prop="isLong" min-width="120" />
<el-table-column label="班组卡控" align="center" min-width="150">
  <template slot-scope="scope">
            <el-switch v-model="scope.row.teamOnoff" active-value="1" inactive-value="0"
              @change="handleStatusChange(scope.row)"></el-switch>
          </template>
</el-table-column> -->

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="80px" fixed="right">
          <template slot-scope="scope">
            <el-button class="operite" icon="el-icon-view " size="mini" type="text"
              v-hasPermi="['PlanTeam:PlanTeam:view']" @click="handleViews(scope.row)">详情
            </el-button>
            <!-- <el-button class="operite" icon="el-icon-setting" size="mini" type="text"
              v-hasPermi="['PlanTeam:PlanTeam:set1Time']" @click="handleSettingFirstTime(scope.row)">设置1列位时间
            </el-button>
            <el-button class="operite" icon="el-icon-setting" size="mini" type="text"
              v-hasPermi="['PlanTeam:PlanTeam:set2Time']" @click="handleSettingSecondTime(scope.row)">设置2列位时间
            </el-button>
            <el-button class="operite" icon="el-icon-setting" size="mini" type="text"
              v-hasPermi="['PlanTeam:PlanTeam:set1Work']" @click="handleSettingFirst(scope.row)">设置1列位班组
            </el-button>
            <el-button class="operite" icon="el-icon-setting" size="mini" type="text"
              v-hasPermi="['PlanTeam:PlanTeam:set2Work']" @click="handleSettingSecond(scope.row)">设置2列位班组
            </el-button> -->
            <!-- <el-button class="operite" icon="el-icon-setting" size="mini" type="text" v-if="scope.row.isLong == '是'"
              v-hasPermi="['PlanTeam:PlanTeam:add']" @click="handleWorkplan(scope.row)">设置作业班组
            </el-button> -->
            <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
              v-hasPermi="['workPlan:workPlan:edit']">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" class="delBtn_R" @click="handleDelete(scope.row)"
              v-hasPermi="['workPlan:workPlan:remove']">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <!-- 添加作业计划对话框 -->
    <el-dialog :title="title" :visible.sync="open" v-if="open" width="900px" append-to-body>
      <el-form ref="form" :model="form" label-width="130px" :rules="rules">
        <div style="display: flex">
          <el-form-item label-width="0px">
            <el-radio-group v-model="form.shift">
              <el-radio label="1">白班</el-radio>
              <el-radio label="2">夜班</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="日期" prop="jobDate">
            <el-date-picker v-model="form.jobDate" type="date" placeholder="选择日期" format="yyyy-MM-dd"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </div>

        <el-table :data="form.workPlanList" border style="width: 100%; margin-bottom: 20px"
          :span-method="objectSpanMethod" max-height="520px">
          <el-table-column prop="positionName" label="台位" width="120" align="center">
          </el-table-column>
          <el-table-column prop="trackName" label="股道" width="120" align="center">
          </el-table-column>
          <el-table-column prop="address" label="1列位" align="center">
            <template slot-scope="scope">
              <!--   @clear="setvalueclear(scope.row, scope.$index)"
               @change="handleOneColumnId(scope.row, scope.$index)"
              -->
              <el-select placeholder="请选择车号" filterable v-model="scope.row.oneColumnId" clearable>
                <el-option v-for="item in choiceList" :key="item.id" :label="item.code" :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <!--     :disabled="scope.$index==3 || scope.$index==4 || scope.$index==5 || scope.$index==6
                || scope.$index==10 || scope.$index==11 || scope.$index==12 || scope.$index==13
                || scope.$index==17 || scope.$index==18 || scope.$index==19 || scope.$index==20
                || scope.$index==24 || scope.$index==25 || scope.$index==26 || scope.$index==27?true:false" -->
          <el-table-column prop="address" label="2列位" align="center">
            <template slot-scope="scope">
              <!--  @change="handleTwoColumnId(scope.row, scope.$index)" -->
              <el-select placeholder="请选择车号" filterable v-model="scope.row.twoColumnId" clearable>
                <el-option v-for="item in choiceList" :key="item.id" :label="item.code" :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="长编组重联" width="120" align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isLong" class="is-long-checkbox" true-label="1" false-label="0">
              </el-checkbox>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 修改作业计划对话框 -->
    <el-dialog :title="title" :visible.sync="openEdit" v-if="openEdit" width="800px" append-to-body>
      <el-form ref="editForm" :model="editForm" label-suffix="：" label-width="120px" :rules="rules">
        <el-form-item label="台位">
          {{ editForm.positionName }}
        </el-form-item>
        <el-form-item label="股道">
          {{ editForm.trackName }}
        </el-form-item>
        <el-form-item label="班次">
          <el-radio-group v-model="editForm.shift">
            <el-radio label="1">白班</el-radio>
            <el-radio label="2">夜班</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="日期" prop="jobDate">
          <el-date-picker v-model="editForm.jobDate" :clearable="false" type="date" placeholder="选择日期"
            format="yyyy-MM-dd" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="1列位">
          <el-select placeholder="请选择车号" v-model="editForm.oneColumnId" @clear="clearoneColumnId" clearable
            @change="selectoneColumnId">
            <el-option v-for="item in choiceList" :key="item.id" :label="item.code" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="2列位">
          <el-select placeholder="请选择车号" clearable v-model="editForm.twoColumnId" @clear="cleartwoColumnId"
            @change="selecttwoColumnId">
            <el-option v-for="item in choiceList" :key="item.id" :label="item.code" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="长编组重联">
          <el-checkbox v-model="editForm.isLong" class="is-long-checkbox" true-label="1" false-label="0">
          </el-checkbox>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('editForm')">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 一二列位弹框 -->
    <el-dialog title="入库作业" :visible.sync="OnesShowCar" width="1200px" append-to-body>
      <div style="display: flex; justify-content: space-between">
        <div style="margin: 10px 0; font-size: 18px">车号：{{ carCode }}</div>
        <div>
          <el-button type="primary" size="mini" @click="handleCheckData">数据检测</el-button>
          <el-button type="primary" size="mini" @click="handlerestore">恢复作业</el-button>
          <el-button type="primary" size="mini" @click="handleExport">导出</el-button>
        </div>
      </div>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="供电预检" name="first"></el-tab-pane>
        <el-tab-pane label="断电作业" name="second"></el-tab-pane>
        <el-tab-pane label="供电检修" name="third"></el-tab-pane>
      </el-tabs>
      <div style="height: 70vh; overflow-y: scroll; padding-right: 15px">
        <el-table :data="enterList">
          <el-table-column label="检修班组" align="center" prop="workTeamName" min-width="180" show-overflow-tooltip="" />
          <el-table-column label="开始时间" align="center" prop="startTime" min-width="180" show-overflow-tooltip="">
          </el-table-column>
          <el-table-column label="插号志人员" align="center" prop="insertPersonName" min-width="180"
            show-overflow-tooltip="">
          </el-table-column>
          <el-table-column label="时长" align="center" prop="duration" min-width="180" show-overflow-tooltip="" />
          <el-table-column label="结束时间" align="center" prop="endTime" min-width="180" show-overflow-tooltip="">
          </el-table-column>
          <el-table-column label="撤号志人员" align="center" prop="removePersonName" min-width="180"
            show-overflow-tooltip="">
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!-- 无车 -->
    <el-dialog title="入库作业" :visible.sync="NoneShowCar" width="1200px" append-to-body>
      <div style="display: flex; justify-content: space-between">
        <div style="margin: 10px 0; font-size: 18px">车号：{{ carCode }}</div>
        <div>
          <el-button type="primary" size="mini" @click="handleCheckData">数据检测</el-button>
          <el-button type="primary" size="mini" @click="handlerestore">恢复作业</el-button>
          <el-button type="primary" size="mini" @click="handleExport">导出</el-button>
        </div>
      </div>

      <el-tabs v-model="NoneactiveName">
        <el-tab-pane label="无车作业" name="first"></el-tab-pane>
      </el-tabs>
      <div style="height: 70vh; overflow-y: scroll; padding-right: 15px">
        <el-table :data="noCarList">
          <el-table-column label="检修班组" align="center" prop="workTeamName" min-width="180" show-overflow-tooltip="" />
          <el-table-column label="开始时间" align="center" prop="startTime" min-width="180" show-overflow-tooltip="">
          </el-table-column>
          <el-table-column label="插号志人员" align="center" prop="insertPersonName" min-width="180"
            show-overflow-tooltip="">
          </el-table-column>
          <el-table-column label="时长" align="center" prop="duration" min-width="180" show-overflow-tooltip="" />
          <el-table-column label="结束时间" align="center" prop="endTime" min-width="180" show-overflow-tooltip="">
          </el-table-column>
          <el-table-column label="撤号志人员" align="center" prop="removePersonName" min-width="180"
            show-overflow-tooltip="">
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <el-dialog :title="settingTitle" :visible.sync="settingPlan" width="900px" append-to-body>
      <div class="selectGroups">
        <div class="left">
          <div class="leftTop">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">所有班组
            </el-checkbox>
          </div>
          <div class="leftBottom">
            <div>
              <el-checkbox-group v-model="checkedFirst" @change="handleCheckedFirstChange" style="diaplay: block">
                <el-checkbox v-for="item in workTeamLists" :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
        <div style="width: 80px; margin: auto; text-align: center">
          <div style="width: 100%" @click="selectRightData">
            <img src="../../../assets/images/right.png" alt="" />
          </div>
          <div style="width: 100%; margin-top: 50px" @click="selectLeftData">
            <img src="../../../assets/images/left.png" alt="" />
          </div>
        </div>
        <div class="left">
          <div class="leftTop">
            <el-checkbox :indeterminate="isIndeterminateSecond" v-model="checkAllSecond"
              @change="handleCheckAllChangeSecond">已选班组
            </el-checkbox>
          </div>
          <div class="leftBottom">
            <div>
              <el-checkbox-group v-model="checkedSecond" @change="handleCheckedChangeSecond" style="diaplay: block">
                <el-checkbox v-for="items in selectLists" :label="items.id" :key="items.id">{{ items.name
                }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormSetting">确 定</el-button>
        <el-button @click="cancelsetting">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 设置时间 -->
    <el-dialog :title="timeTitle" :visible.sync="settingTime" width="700px" append-to-body>
      <el-form :model="TimeForm" size="small" label-width="150px" :rules="timerules" ref="timeform">
        <el-form-item label="开始时间" prop="oneStartTime" v-if="onesFlag">
          <el-date-picker v-model="TimeForm.oneStartTime" type="datetime" format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="oneEndTime" v-if="onesFlag">
          <el-date-picker v-model="TimeForm.oneEndTime" type="datetime" format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="开始时间" prop="twoStartTime" v-if="twosFlag">
          <el-date-picker v-model="TimeForm.twoStartTime" type="datetime" format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="twoEndTime" v-if="twosFlag">
          <el-date-picker v-model="TimeForm.twoEndTime" type="datetime" format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormTime">确 定</el-button>
        <el-button @click="settingTime = false">取 消</el-button>
      </div>
    </el-dialog>

   <el-dialog title="详情" :visible.sync="showDetails" width="100%" append-to-body>
     <detailsPlan  ref="detailsPlans"  :jobDate="jobDate"  :shift="shift"></detailsPlan>
   </el-dialog>
  </div>
</template>

<script>
import {
  listWorkPlan1,
  getWorkPlan,
  delWorkPlan,
  addWorkPlan,
  updateWorkPlan,
  listChoice,
  listbycar,
  workTeamList,
  PlanTeamlistvo,
  addlist,
  editonoff,
  PlanTeamOnOff,
  Planrestore,
  checkData,
  edittime,
  gettimeInfo,
} from "@/api/planManage/planManage";
import detailsPlan from './details.vue'
import { listPosition } from "@/api/baseData/position";
import { listTrack } from "@/api/baseData/track";
const cityOptions = ["上海", "北京", "广州", "深圳"];
export default {
  name: "WorkPlan",
  components:{detailsPlan},
  data() {
    return {
      jobDate:''  ,   shift:'',
      showDetails:false,
      timeTitle: "",
      timerules: {
        oneEndTime: [
          {
            required: true,
            message: "结束时间不能为空",
            trigger: "blur",
          },
        ],
        oneStartTime: [
          {
            required: true,
            message: "开始时间不能为空",
            trigger: "blur",
          },
        ],
        twoStartTime: [
          {
            required: true,
            message: "开始时间不能为空",
            trigger: "blur",
          },
        ],
        twoEndTime: [
          {
            required: true,
            message: "开始时间不能为空",
            trigger: "blur",
          },
        ],
      },
      // 选择时间对象
      TimeForm: {
        id: "",
        startTime: "",
        endTime: "",
      },
      // 设置时间弹框
      settingTime: false,
      selectLists: [],
      checkAll: false,
      checkedFirst: [],
      checkedSecond: [],
      cities: cityOptions,
      isIndeterminate: true,
      isIndeterminateSecond: true,
      checkAllSecond: false,
      workTeamLists: [],
      settingPlan: false,
      settingTitle: "",
      complete: 1,
      timer: null,
      planGuid: "",
      oneId: "",
      noCarList: [],
      NoneactiveName: "first",
      NoneShowCar: false,
      oneTotal: 0,
      carCode: "",
      enterList: [],
      activeName: "first",
      OnesShowCar: false,
      editArray: [],
      jobDateArray: [],

      eleTabTop: 0, //表格容器eleTabTop距浏览器顶部距离
      choiceList: [], // 列位下拉框
      positionList: [], // 台位
      trackList: [], // 股道
      dateRange: [], // 日期范围
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 作业计划表格数据
      workPlanList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        jobDate: undefined,
        pageNum: 1,
        pageSize: 10,
        oneColumn: null,
        twoColumn: null,
        trackName: null,
        positionName: null,
        startTime: null,
        endTime: null,
        shift: null,
        isLong: null,
        twoEndTime: null,
        twoStartTime: null,
        oneStartTime: null,
        oneEndTime: null,
      },
      // 表单参数
      form: {
        jobDate: "", // 日期
        shift: "1", // 白班或者夜班
        workPlanList: [],
      },
      openEdit: false, // 修改弹窗
      editForm: {
        positionId: "",
        positionName: "",
        trackId: "",
        trackName: "",
        oneColumnId: null,
        twoColumnId: null,
        isLong: "",
        shift: "",
        id: null,
      },
      // 表单校验
      rules: {
        jobDate: [
          {
            required: true,
            message: "日期不能为空",
            trigger: "blur",
          },
        ],
        shift: [
          {
            required: true,
            message: "班次不能为空",
            trigger: "blur",
          },
        ],
      },
      temps: "",
      flag: false,
      oneParams: {
        carCode: null,
        complete: null,
        type: null,
        workPlanId: null,
      },
      complete: "",
      workPlanId: "",
      onesFlag: false,
      twosFlag: false,
    };
  },
  created() {
    this.getList();
    this.getDict(); // 获取新增页面字典
  },
  mounted() {
    // 滚动条的获取
    this.handleScrollx();
    window.addEventListener("scroll", this.handleScrollx, true);
  },
  activated() {
    //获取表格容器距页面头部的距离
    this.handleScrollx();
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScrollx, true);
    // this.timer = null;
    // clearInterval(this.timer)
  },
  methods: {
    handleViews(row) {
       this.showDetails = true
       this.jobDate = row.jobDate
        this.shift = row.shift
        this.$nextTick(() => {
      this.$refs.detailsPlans.getDetails();
    });
      //  this.$router.push({
      //   path: "/planManage/plan/details",
      //   query:{
      //     jobDate:row.jobDate,
      //     shift:row.shift
      //   }
      // });
    },
    handleSettingFirstTime(row) {
      this.timeTitle = "设置一列位时间";
      this.complete = 1;
      this.timeInfo(row.id);
      this.onesFlag = true;
      this.twosFlag = false;
    },
    handleSettingSecondTime(row) {
      this.twosFlag = true;
      this.onesFlag = false;
      this.timeTitle = "设置二列位时间";
      this.complete = 2;
      this.timeInfo(row.id);
    },
    timeInfo(id) {
      this.timeId = id;
      gettimeInfo({
        id: id,
        complete: this.complete,
      }).then((res) => {
        this.settingTime = true;
        this.TimeForm = res.data;
      });
    },
    submitFormTime() {
      this.TimeForm.id = this.timeId;
      this.TimeForm.complete = this.complete;
      this.$refs["timeform"].validate((valid) => {
        if (valid) {
          edittime(this.TimeForm).then((res) => {
            this.msgSuccess("时间设置成功");
            this.settingTime = false;
          });
        }
      });
    },
    handleStatusChange(row) {
      this.$modal
        .confirm("确认要修改班组卡控状态吗？")
        .then(function () {
          return editonoff(row.id);
        })
        .then(() => {
          this.$modal.msgSuccess("修改成功");
        })
        .catch(function () {
          row.teamOnoff = row.teamOnoff === "0" ? "1" : "0";
        });
    },
    submitFormSetting() {
      addlist({
        workPlanId: this.workPlanId,
        complete: this.complete,
        workTeamIdList: this.selectLists.map((item) => item.id),
      }).then((res) => {
        this.msgSuccess("设置成功");
        this.settingPlan = false;
        this.getList();
      });
    },
    cancelsetting() {
      this.settingPlan = false;
    },
    deWeight(arr, initArr = []) {
      arr.forEach((item) => {
        let isFind = initArr.find((cell) => cell.id === item.id);
        if (!isFind) {
          initArr.push(item);
        }
      });
      return initArr;
    },
    selectRightData() {
      let datas = [];
      this.checkedFirst.forEach((item) => {
        this.workTeamLists.forEach((items) => {
          if (item == items.id) {
            datas.push(items);
          }
        });
      });
      this.selectLists = this.deWeight([...datas, ...this.selectLists]);
    },
    selectLeftData() {
      console.log(this.checkedSecond);
      PlanTeamOnOff({
        workPlanId: this.workPlanId,
        complete: this.complete,
        workTeamIdList: this.checkedSecond.join(","),
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.checkedSecond.forEach((item, index) => {
            this.selectLists.forEach((items, indexs) => {
              if (item == items.id) {
                this.selectLists.splice(indexs, 1);
              }
            });
          });
          this.checkedSecond = [];
        }
      });
    },
    handleCheckAllChange(val) {
      let ids = this.workTeamLists.map((item) => item.id);
      this.checkedFirst = val ? ids : [];
      this.isIndeterminate = false;
    },
    handleCheckedFirstChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.workTeamLists.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.workTeamLists.length;
    },
    handleCheckAllChangeSecond(val) {
      let ids = this.selectLists.map((item) => item.id);
      this.checkedSecond = val ? ids : [];
      this.isIndeterminateSecond = false;
    },
    handleCheckedChangeSecond(value) {
      let checkedCount = value.length;
      this.checkAllSecond = checkedCount === this.selectLists.length;
      this.isIndeterminateSecond =
        checkedCount > 0 && checkedCount < this.selectLists.length;
    },
    handleSettingFirst(row) {
      this.checkedSecond = [];
      this.checkedFirst = [];
      this.isIndeterminate = true;
      this.isIndeterminateSecond = true;
      this.complete = 1;
      this.workPlanId = row.id;
      this.getworkTeamList();
      this.getPlanTeamlistvo(row);
      this.settingPlan = true;
      this.settingTitle = "设置1列位班组";
    },
    handleSettingSecond(row) {
      this.checkedSecond = [];
      this.checkedFirst = [];
      this.isIndeterminate = true;
      this.isIndeterminateSecond = true;
      this.complete = 2;
      this.workPlanId = row.id;
      this.getworkTeamList();
      this.getPlanTeamlistvo(row);
      this.settingPlan = true;
      this.settingTitle = "设置2列位班组";
    },
    handleWorkplan(row) {
      this.checkedSecond = [];
      this.checkedFirst = [];
      this.isIndeterminate = true;
      this.isIndeterminateSecond = true;
      this.complete = 0;
      this.workPlanId = row.id;
      this.getworkTeamList();
      this.getPlanTeamlistvo(row);
      this.settingPlan = true;
      this.settingTitle = "设置作业班组";
    },
    getPlanTeamlistvo(row) {
      PlanTeamlistvo({
        complete: this.complete,
        workPlanId: row.id,
      }).then((res) => {
        let data = [];
        res.rows.forEach((item) => {
          data.push({
            id: item.workTeamId,
            name: item.teamName,
          });
        });
        // this.checkedSecond = data.map((item=>item.id))
        this.selectLists = data;
      });
    },
    getworkTeamList() {
      workTeamList().then((res) => {
        this.workTeamLists = res.rows;
      });
    },
    clearoneColumnId(e) {
      this.editForm.oneColumnId = null;
      this.editForm.oneColumn = null;
    },
    cleartwoColumnId() {
      this.editForm.twoColumnId = null;
      this.editForm.twoColumn = null;
    },
    selecttwoColumnId(e) {
      if (this.editForm.oneColumnId) {
        this.choiceList.forEach((item) => {
          if (item.id == this.editForm.oneColumnId && item.code.includes("L")) {
            if (this.editForm.twoColumnId != this.editForm.oneColumnId) {
              this.msgError("请选择同一辆车");
            }
          }
        });
      }
    },
    selectoneColumnId(e) {
      this.choiceList.forEach((item) => {
        if (item.id == e && item.code.includes("L")) {
          this.editForm.twoColumnId = e;
        }
      });
    },
    handleClick(tab, event) {
      this.activeName = tab.name;
      if (this.activeName == "first") {
        this.oneParams.type = 1;
      } else if (this.activeName == "second") {
        this.oneParams.type = 2;
      } else if (this.activeName == "third") {
        this.oneParams.type = 3;
      }
      this.getlistbycar();
    },
    twoColumn(carCode, id, planGuid) {
      if (carCode == "无车") {
        this.NoneactiveName = "first";
        this.oneParams.type = 4;
        this.NoneShowCar = true;
      } else {
        this.activeName = "first";
        this.oneParams.type = 1;
        this.OnesShowCar = true;
      }
      this.carCode = carCode;
      this.oneId = id;
      this.planGuid = planGuid;
      this.complete = 2;
      this.oneParams.carCode = carCode;
      this.oneParams.workPlanId = id;
      this.oneParams.complete = 2;

      this.getlistbycar();
    },
    OneColmu(carCode, id, planGuid) {
      if (carCode == "无车") {
        this.NoneactiveName = "first";
        this.oneParams.type = 4;
        this.NoneShowCar = true;
      } else {
        this.activeName = "first";
        this.oneParams.type = 1;
        this.OnesShowCar = true;
      }
      this.carCode = carCode;
      this.oneId = id;
      this.planGuid = planGuid;
      this.complete = 1;
      this.oneParams.carCode = carCode;
      this.oneParams.workPlanId = id;
      this.oneParams.complete = 1;
      this.getlistbycar();
    },
    getlistbycar() {
      listbycar(this.oneParams).then((res) => {
        if (this.oneParams.carCode == "无车") {
          this.noCarList = res.rows;
        } else {
          this.enterList = res.rows;
        }
      });
    },
    setvalueclear(val, index) {
      this.form.workPlanList[index].temps = "";
      this.flag = false;
    },

    // 对话框1列位
    handleOneColumnId(row, index) {
      this.form.workPlanList[index].temps = "";
      this.choiceList.forEach((item) => {
        if (item.code.includes("L") && row.oneColumnId === item.id) {
          row.twoColumnId = item.id;
          this.form.workPlanList[index].temps = item.code;
        }
      });
    },
    // 对话框2列位

    handleTwoColumnId(row, index) {
      console.log(this.form.workPlanList[index].temps)
      if (this.form.workPlanList[index].temps) {
        if (row.oneColumnId !== row.twoColumnId) {
          this.msgError("请选择同一辆车");
          this.flag = true;
        } else {
          this.flag = false;
        }
      } else {
        this.flag = false;
      }
    },
    //获取表格容器距页面头部的距离
    handleScrollx() {
      this.eleTabTop = this.$refs.eleTab.getBoundingClientRect().top;
    },
    /** 查询作业计划列表 */
    getList() {
      this.loading = true;
      listWorkPlan1(this.addDateRange(this.queryParams)).then((response) => {
        this.workPlanList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
      // this.getIntever();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams.jobDate = null;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 获取新增页面字典
    async getDict() {
      // 列位下拉框
      let choiceRes = await listChoice();
      if (choiceRes.code === 200) {
        this.choiceList = choiceRes.rows;
      }
      // 台位
      let positionRes = await listPosition();
      if (positionRes.code === 200) {
        this.positionList = positionRes.rows;
      }
      // 股道
      let trackRes = await listTrack();
      if (trackRes.code === 200) {
        this.trackList = trackRes.rows;
      }
    },
    // 设置添加表格数据
    setWorkPlanList() {
      let resArr = [];
      this.positionList.map((itemP) => {
        this.trackList.map((itemT) => {
          let infoObj = {
            positionId: itemP.id,
            positionName: itemP.name,
            trackId: itemT.id,
            trackName: itemT.name,
            oneColumnId: null,
            twoColumnId: null,
            isLong: "0",
          };
          resArr.push(infoObj);
        });
      });
      this.form.workPlanList = [...resArr];
      let getParams = JSON.parse(localStorage.getItem("setParams"));
      if (getParams && this.title === "添加计划") {
        this.form.workPlanList = getParams.workPlanList;
      }
    },
    // 合并表格行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let listLength = this.trackList.length;
      if (columnIndex === 0) {
        if (rowIndex % listLength === 0) {
          return {
            rowspan: listLength,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      if (this.title === "添加计划") {
        // this.getDict(); // 获取新增页面字典
        if (localStorage.getItem("setParams")) {
          let getParams = JSON.parse(localStorage.getItem("setParams"));
          this.form.shift = getParams.shift;
          this.form.jobDate = getParams.jobDate;
        }
      } else {
        this.reset();
      }
      this.setWorkPlanList(); // 设置添加表格数据
      this.open = true;
      this.title = "添加计划";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.resetEdit();
      const id = row.id || this.ids;
      getWorkPlan(id).then((response) => {
        this.editForm = response.data;
        this.editArray.push(
          this.editForm.jobDateStart,
          this.editForm.jobDateEnd
        );
        this.openEdit = true;
        this.title = "修改计划";
      });
    },
    // 取消按钮
    cancel() {
      if (this.title === "添加计划") {
        let setParams = {
          shift: this.form.shift,
          jobDate: this.form.jobDate,
          workPlanList: this.form.workPlanList,
        };
        localStorage.setItem("setParams", JSON.stringify(setParams));
      }
      this.open = false;
      this.openEdit = false;
      // this.reset();
      this.resetEdit();
    },
    // 表单重置
    reset() {
      this.form = {
        jobDate: "", // 日期
        shift: "1", // 白班或者夜班
        workPlanList: [
          {
            id: null,
            jobDate: null,
            shift: null,
            positionId: null,
            positionName: null,
            trackId: null,
            trackName: null,
            oneColumnId: null,
            oneColumn: null,
            twoColumnId: null,
            twoColumn: null,
            complete: null,
            isLong: null,
            startTime: null,
            endTime: null,
            twoEndTime: null,
            twoStartTime: null,
            oneStartTime: null,
            oneEndTime: null,
          },
        ],
      };
      this.resetForm("form");
    },
    // 重置编辑表单
    resetEdit() {
      this.editForm = {
        positionId: "",
        positionName: "",
        trackId: "",
        trackName: "",
        oneColumnId: null,
        twoColumnId: null,
        isLong: "",
        shift: "",
        id: null,
      };

      this.resetForm("editForm");
    },
    /** 提交按钮 */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (formName === "editForm") {
            updateWorkPlan(this.editForm).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.openEdit = false;
              this.getList();
            });
          } else {
            this.form.workPlanList.forEach((item) => {
              item.shift = this.form.shift;
              item.jobDate = this.form.jobDate;
            });
            if (this.flag) return this.msgError("请选择正确的数据");

            addWorkPlan(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              localStorage.removeItem("setParams");
              this.reset();
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm("是否确认删除作业计划？")
        .then(function () {
          return delWorkPlan(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
    },
    handlerestore() {
      Planrestore({
        carCode: this.carCode,
        complete: this.complete,
        planId: this.oneId,
      }).then((res) => {
        this.$modal.msgSuccess("恢复成功");
      });
    },
    handleCheckData() {
      checkData({
        carCode: this.carCode,
        complete: this.complete,
        planId: this.oneId,
      }).then((res) => {
        this.$modal.msgSuccess("检测成功");
      });
    },
    /** 导出按钮操作 */
    //
    handleExport() {
      this.downloads(
        `workRecord/workRecord/createXLS?workPlanId=${this.oneId}&planGuid=${this.planGuid}&carCode=${this.carCode}&complete=${this.complete}`,
        {
          workPlanId: this.oneId,
          planGuid: this.planGuid,
          carCode: this.carCode,
          complete: this.complete,
        },
        `workPlan_${new Date().getTime()}.xls`
      );
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .eleTab {
  .el-table__header-wrapper {
    position: fixed;
    z-index: 9;
    top: 115px;
    right: 354px;
    padding-left: 573px;
  }

  .el-table__fixed-header-wrapper .fixed-width {
    position: fixed;
    width: 350px !important;
    top: 115px;
    height: 46px;
    right: 20px;
  }

  .el-table__body-wrapper {
    margin-top: 50px !important;
  }

  .el-table__fixed-body-wrapper {
    z-index: 2;
    top: 50px !important;
  }

  .el-table__fixed-right {
    // z-index: 10;
  }
}

.selectGroups {
  margin: 0 20px;
  display: flex;
  margin-bottom: 20px;

  .left {
    .leftTop {
      text-align: center;
      width: 330px;
      height: 45px;
      line-height: 38px;

      .el-checkbox {
        width: 100%;
        height: 45px;
        border: 1px solid #ccc;
      }
    }

    .leftBottom {
      height: 60vh;
      overflow: auto;
      border: 1px solid #ccc;
      border-top: none;

      .el-checkbox {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
        width: 100%;
        height: 35px;
        line-height: 35px;
        padding-left: 30px;
      }
    }
  }
}

.el-checkbox,
.el-checkbox__label {
  font-size: 22px;
}

/* checkbox */
.el-checkbox__inner {
  height: 22px;
  width: 22px;
}

/* check mark */
.el-checkbox__inner::after {
  height: 14px;
  left: 8px;
}

::v-deep .el-tabs {
  height: 48px;
}

::v-deep .el-tabs__item {
  font-weight: 600 !important;
  font-size: 16px;
}

::v-deep .el-tabs__content {
  display: none;
}

::v-deep .eleTab {
  .s {
    justify-content: space-around;
  }

  .borders {
    border-bottom: 1px solid !important;
  }
}

::v-deep.hideSidebar {
  .eleTab {
    .el-table__header-wrapper {
      padding-left: 249px !important;
    }
  }
}
</style>
